<template>
  <!-- 评论 -->
  <div class="comments">
    <div class="title">
      <div>
        <i class="el-icon-chat-dot-square"></i>
        评论
      </div>
    </div>
    <div class="comments-info">
      <el-avatar
        shape="square"
        size="large"
        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        class="avatar"
      ></el-avatar>
      <el-input
        type="textarea"
        :autosize="{ minRows: 3, maxRows: 4 }"
        placeholder="请输入内容"
        v-model="comments"
        maxlength="200"
        show-word-limit
      >
      </el-input>
    </div>
    <div class="send">
      <el-button class="btn" plain @click="send">评论</el-button>
    </div>
    <!-- 评论内容 -->
    <div
      class="comments-box"
      v-for="(item, index) in commentsList"
      :key="index"
    >
      <el-avatar
        shape="square"
        size="large"
        :src="item.avatar"
        class="avatar"
      ></el-avatar>
      <div class="content">
        <a href="">{{ item.name }}</a>
        <span class="time">{{ item.time }}</span>
        <p>{{ item.comments }}</p>
      </div>
      <div class="view">
        <i class="iconfont icon-dianzan"></i>
        {{ item.num }}
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      v-show="commentsList.length > 5"
      @current-change="handleCurrentChange"
      :page-size="5"
      layout="total, prev, pager, next, jumper"
      :total="commentsList.length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'comments',
  props: ['commentsId'],
  data() {
    return {
      comments: '',
      commentsList: [
        {
          id: 1,
          avatar:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'mogu2022',
          time: '2022-07-02 23:23:23',
          comments: '干什么呢干什么呢',
          num: '2'
        },
        {
          id: 1,
          avatar:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'mogu2022',
          time: '2022-07-02 23:23:23',
          comments: '干什么呢干什么呢',
          num: '2'
        },
        {
          id: 1,
          avatar:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'mogu2022',
          time: '2022-07-02 23:23:23',
          comments: '干什么呢干什么呢',
          num: '2'
        },
        {
          id: 1,
          avatar:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'mogu2022',
          time: '2022-07-02 23:23:23',
          comments: '干什么呢干什么呢',
          num: '2'
        },
        {
          id: 1,
          avatar:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'mogu2022',
          time: '2022-07-02 23:23:23',
          comments: '干什么呢干什么呢',
          num: '2'
        },
        {
          id: 1,
          avatar:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'mogu2022',
          time: '2022-07-02 23:23:23',
          comments: '干什么呢干什么呢',
          num: '2'
        },
        {
          id: 1,
          avatar:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'mogu2022',
          time: '2022-07-02 23:23:23',
          comments: '干什么呢干什么呢',
          num: '2'
        }
      ]
    }
  },
  methods: {
    // 评论
    send() {},
    // 改变当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="less" scoped>
.comments {
  background: #fff;
  margin-bottom: 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  padding: 0px 20px;
  padding-bottom: 20px;
  .comments-info {
    display: flex;
  }
  .avatar {
    margin-right: 20px;
  }
  .send {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
  }
  .title {
    height: 48px;
    border-radius: 2px 2px 0 0;
    line-height: 48px;
    background: #fff;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .comments-box:last-child {
    border: 0px;
  }
  .comments-box {
    display: flex;
    padding: 15px 0;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f2;
    .content {
      width: 690px;
      .time {
        margin-left: 20px;
        font-size: 12px;
      }
      p {
        padding-top: 5px;
      }
    }
    .view {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 40px;
    }
  }
}
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>
